<style>
    /* 删除确认框样式 */
    .confirmation {
        display: none; /* 初始隐藏 */
        padding: 10px;
        background-color: #f8d7da;
        color: #721c24;
        border: 1px solid #f5c6cb;
        border-radius: 5px;
        margin-left: 10px;
        position: absolute; /* 确保它显示在按钮旁边 */
        z-index: 1000;
        flex-direction: row;
        align-items: center;
        width: auto;
    }

    .confirmation button {
        margin-left: 10px;
    }

    /* 删除成功提示框样式 */
    .success-message {
        display: none; /* 初始隐藏 */
        padding: 10px;
        background-color: #d4edda;
        color: #155724;
        border: 1px solid #c3e6cb;
        border-radius: 5px;
        margin-left: 10px;
        position: absolute; /* 确保它显示在按钮旁边 */
        z-index: 1000;
    }
</style>
<script>
    document.querySelectorAll('[w-delete="true"]').forEach(function (deleteElement) {
        deleteElement.addEventListener('click', function (event) {
            // 获取deleteElement是否有属性confirm属性，没有则阻止默认事件
            if (!deleteElement.hasAttribute('confirm')) {
                // 阻止默认事件
                event.preventDefault();
                // 防止点击删除按钮时事件冒泡到文档上
                event.stopPropagation();
            } else {
                // 如果已设置confirm属性，提交表单
                deleteElement.closest('form').submit();
                return;
            }

            // 获取点击元素的位置
            const rect = deleteElement.getBoundingClientRect();
            let msg = deleteElement.getAttribute('msg');
            if (!msg) {
                msg = deleteElement.getAttribute('w-msg');
                if (!msg) {
                    msg = __('确认删除吗？');
                }
            }

            // 计算相对于整个文档的位置
            let offsetX = window.scrollX || document.documentElement.scrollLeft;
            let offsetY = window.scrollY || document.documentElement.scrollTop;

            let currentElement = deleteElement;
            while (currentElement) {
                offsetX += currentElement.scrollLeft || 0;
                offsetY += currentElement.scrollTop || 0;
                currentElement = currentElement.offsetParent;
            }

            // 更新为相对于文档的坐标
            const docLeft = rect.left + offsetX;
            const docTop = rect.top + offsetY;

            // 动态创建确认框
            const confirmation = document.createElement('div');
            confirmation.classList.add('confirmation');

            // 默认显示在右侧
            let confirmationLeft = docLeft + 10;  // 默认显示在右边
            let confirmationTop = docTop;  // 默认垂直对齐

            // 计算确认框宽高
            confirmation.style.position = 'absolute'; // 使其可以自由定位
            confirmation.style.display = 'block';
            document.body.appendChild(confirmation);
            const confirmationWidth = confirmation.offsetWidth;
            const confirmationHeight = confirmation.offsetHeight;
            confirmation.remove(); // 移除临时确认框，以获取宽高

            // 判断确认框是否超出可视页面右边，如果超出则显示在左边
            if (confirmationLeft + confirmationWidth > document.body.clientWidth) {
                confirmationLeft = docLeft - confirmationWidth - rect.width - 50;  // 超出则显示在左边
            }

            // 判断确认框是否超出页面下边，如果超出则显示在上边
            if (confirmationTop + confirmationHeight > document.body.clientHeight) {
                confirmationTop = docTop - confirmationHeight - rect.height - 10; // 超出则显示在上边
            }

            // 设置确认框的位置
            confirmation.style.left = `${confirmationLeft}px`;
            confirmation.style.top = `${confirmationTop}px`;

            // 设置确认框的文本
            confirmation.innerHTML = `<div>${msg}</div>`;

            // 创建“确认”按钮
            const confirmButton = document.createElement('button');
            confirmButton.classList = 'btn btn-sm btn-danger';
            confirmButton.textContent = __('确认');  // 直接写死为"确认"
            confirmButton.addEventListener('click', function () {
                // 设置confirm属性为1，表示确认删除
                deleteElement.setAttribute('confirm', '1');

                // 创建删除成功提示框
                const successMessage = document.createElement('div');
                successMessage.classList.add('success-message');
                successMessage.textContent = __('条目已删除！');  // 直接写死为"条目已删除！"

                // 自动识别边界调整显示位置
                let successMessageLeft = confirmationLeft;
                if (confirmationLeft + successMessage.offsetWidth > document.body.offsetWidth) {
                    successMessageLeft = confirmationLeft - successMessage.offsetWidth - 10;
                }

                successMessage.style.left = `${successMessageLeft}px`;
                successMessage.style.top = `${confirmationTop + 30}px`;  // 在确认框下方偏移 30px

                // 显示成功提示框
                document.body.appendChild(successMessage);
                successMessage.style.display = 'block';

                // 自动隐藏成功提示框，3秒后消失
                setTimeout(function () {
                    successMessage.remove();
                }, 3000);

                // 隐藏确认框
                confirmation.remove();
                deleteElement.click();  // 确认后模拟点击事件来删除目标元素
            });

            // 创建“取消”按钮
            const cancelButton = document.createElement('button');
            cancelButton.classList = 'btn btn-sm btn-default btn-outline';
            cancelButton.textContent = __('取消');  // 直接写死为"取消"
            cancelButton.addEventListener('click', function () {
                confirmation.remove();  // 取消时移除提示框
            });

            // 将按钮添加到确认框
            confirmation.appendChild(confirmButton);
            confirmation.appendChild(cancelButton);

            // 将确认框添加到页面
            document.body.appendChild(confirmation);

            // 显示确认框
            confirmation.style.display = 'block';

            // 点击空白区域时隐藏确认框
            document.addEventListener('click', function hideConfirmation(event) {
                // 判断点击的目标不是确认框和目标元素
                if (!confirmation.contains(event.target) && !deleteElement.contains(event.target)) {
                    confirmation.remove();  // 隐藏确认框
                    // 移除事件监听器
                    document.removeEventListener('click', hideConfirmation);
                }
            });
        });
    });

</script>
